<template>
	<transition name="fade" mode="out-in">
		<el-empty :image="defaultLoading" :image-size="400" :description="LoadingTitle || '内容加载中'" class="loading" />
	</transition>
	<!-- <div class="loading tc">
		<img :src="defaultLoading" class="loading-img" />
		<div class="loading-tip">内容加载中</div>
	</div> -->
</template>

<script setup lang="ts">
import defaultLoading from '@/assets/imgs/loading.webp'
import { useCommonStore } from '@/stores/common'

const { LoadingTitle } = storeToRefs(useCommonStore())
</script>

<style scoped lang="scss">
.loading {
	background-color: #fff;
	display: flex;
	flex-flow: column;
	align-items: center;
	&-img {
		width: vw(400);
		height: vw(400);
	}
	&-tip {
		width: 155px;
		height: 29px;
		border-radius: 6px;
		background: #1c1c2820;
		color: #1c1c28;
	}
}
</style>
